import React, {Component} from 'react';
import {Form, Input, Button} from 'antd';
import {FormItemLayout} from 'sx-antd';
import PageContent from '<%= fileLevel%>layouts/page-content';
import {connect} from '<%= fileLevel%>models';

export const PAGE_ROUTE = '<%= routePath %>';

@connect(state => ({
    data: state.<%= lowercaseName %>.data,
    fetchingData: state.<%= lowercaseName %>.fetchingData,
}))
@Form.create()
export default class <%= capitalName %>Edit extends Component {
    state = {
        isAdd: true,
    };

    componentWillMount() {
        const {id} = this.props.match.params;

        if (id === ':id') {
            this.setState({isAdd: true});
        } else {
            this.setState({isAdd: false});
            this.props.action.<%= lowercaseName %>.getById({params: {id}});
        }
    }

    handleSubmit = (e) => {
        e.preventDefault();
        const {isAdd} = this.state;
        const {form, action: {<%= lowercaseName %>}, history, fetchingData} = this.props;

        if (fetchingData) return;

        form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                const submitAjax = isAdd ? <%= lowercaseName %>.save : <%= lowercaseName %>.update;
                const successTip = isAdd ? '添加成功' : '修改成功';

                submitAjax({params: values, successTip, onResolve: () => history.push('<%= listPageRoutePath %>')});
            }
        });
    };

    handleReset = () => {
        this.props.form.resetFields();
    };

    render() {
        const {form: {getFieldDecorator}, fetchingData, data} = this.props;
        const {isAdd} = this.state;
        const title = isAdd ? '添加<%= chineseName %>' : '修改<%= chineseName %>';

        const labelSpaceCount = 4;

        return (
            <PageContent>
                <h1 style={{textAlign: 'center'}}>{title}</h1>
                <Form onSubmit={this.handleSubmit}>
                    {!isAdd ? getFieldDecorator('id', {initialValue: data.id})(<Input type="hidden"/>) : null}
<% for (let i = 0;i<fields.length;i++){%>
                    <FormItemLayout
                        label="<%= fields[i].title%>"
                        labelSpaceCount={labelSpaceCount}
                        width={300}
                    >
                        {getFieldDecorator('<%= fields[i].dataIndex%>', {
                            initialValue: data.<%= fields[i].dataIndex%>,
                            rules: [
                                {required: true, message: '请输入<%= fields[i].title%>！'},
                            ],
                        })(
                            <Input placeholder="请输入<%= fields[i].title%>"/>
                        )}
                    </FormItemLayout>
<%}%>
                    <FormItemLayout
                        labelSpaceCount={labelSpaceCount}
                    >
                        <Button
                            style={{marginRight: 8}}
                            loading={fetchingData}
                            type="primary"
                            onClick={this.handleSubmit}
                        >
                            提交
                        </Button>
                        <Button
                            type="ghost"
                            onClick={this.handleReset}
                        >
                            重置
                        </Button>
                    </FormItemLayout>
                </Form>
            </PageContent>
        );
    }
}
